// pages/category/index.js

// 引入用来发送请求的 方法 一定要把路径补全
import {request} from '../../request/index.js'
import regeneratorRuntime from '../../lib/runtime/runtime'

Page({

    /**
     * 页面的初始数据
     */
    data: {
        // 左侧的菜单数据数组
        leftMenuList:[],
        // 右侧的菜单数据数组
        rightMenuList:[],
        // 被点击的左侧菜单
        currentIndex:0,
        // 控制滚动置顶的数据
        scrollTop:0


    },
    // 接口返回的数据
    cates:[],

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
       /* 0、 web中本地存储和小程序中的本地储存的区别
            1） 写代码的方式不一样了
                web中：localStorage.setItem("key","value") ; localStorage.getItem("key")
                小程序中：wx.setStorageSync("key","value") ; wx.getStorageSync("key");
            2） 存的时候 有没有做数据类型的转换
                web：不管存入的是什么数据类型 最终都会先调用toString（），把数据变成字符串 在存入进去
               小程序中：不存在数据类型转换这个操作，存什么类型的数据，获取的时候就是什么数据类型
        1、先判断一下本地存储中有没有旧数据
        {time：Date.now,data:[...]}
        2、如果没有旧数据 就直接发送请求
        3、有旧数据 同时 旧数据也没有过期 就使用本地存储的旧数据即可*/
         
        // 1、获取本地存储中的数据
        const Cates=wx.getStorageSync('cates')
        // 2、判断
        if(!Cates){
            // 如果本地存储的数据不存在 就发送请求
            this.getCates()
        }else{
            // 如果有旧数据 定义过期时间 10s改成5分钟
            if(Date.now()-Cates.time>1000*10){
                this.getCates()
            }else{
                // 既有旧数据而且旧数据也没有过期 可以使用旧数据
                this.cates=Cates.data
                  // 构造左边的大菜单数据
            let leftMenuList =this.cates.map(v=>v.cat_name );
            // 构造右边的大菜单数据
            let rightMenuList =this.cates[0].children;
   
               this.setData({
                   leftMenuList,
                   rightMenuList
                   
   
               })


            }
        }

        

    },

    // 获取分类的数据
     async getCates(){
        // request({
        //     // url:"https://api-hmugo-web.itheima.net/api/public/v1/categories"
        //     url: "/categories"
        // })
        // .then(res=>{
        //     // console.log(res);
        //     // console.log(res.data.message);
        //     this.cates=res.data.message;
        //     // 将数据存储到本地
        //     wx.setStorageSync('cates', {time:Date.now(),data:this.cates})
        //     // 构造左边的大菜单数据
        //     let leftMenuList =this.cates.map(v=>v.cat_name );
        //  // 构造右边的大菜单数据
        //  let rightMenuList =this.cates[0].children;

        //     this.setData({
        //         leftMenuList,
        //         rightMenuList
                

        //     })

        // })


        // 1、使用es7的async和await来发送请求(改造优化异步请求的方法)
        const res = await request({
            url: "/categories"
        })
        // this.cates = res.data.message;
        this.cates = res;
        //  将数据存储到本地
             wx.setStorageSync('cates', {time:Date.now(),data:this.cates})
             // 构造左边的大菜单数据
             let leftMenuList =this.cates.map(v=>v.cat_name );
          // 构造右边的大菜单数据
          let rightMenuList =this.cates[0].children;

             this.setData({
                 leftMenuList,
                 rightMenuList
             })



    },


//左侧菜单的点击事件
handleItemTap(e){
    // 1、获取被点击标题上的索引
    // 2、给data中的currentIndex赋值就行
    // 3、根据不同的索引来渲染右侧的商品内容
    // console.log(e)
//    console.log(e.currentTarget.dataset.index) 
   const {index} =e.currentTarget.dataset;
    // 构造右边的大菜单数据
    let rightMenuList =this.cates[index].children;
    this.setData({
        currentIndex:index,
        rightMenuList,
        // 重新设置 右侧内容的scroll-view标签的距离顶部的距离
        scrollTop:0
        

    })
   


}



})